<template>
	<view class="content">
		<viwe class="head">
			<u-tabs :list="list" lineColor="#FFF" :activeStyle="{
			    color: '#303133',
				transform: 'scale(1.25)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}">
				<view slot="right">
					<image src="../../static/img/icon.png" mode="aspectFit" class="rissght"></image>
				</view>
			</u-tabs>

			<u-tabs style="margin-top: -10rpx;" :list="list1" @click="click" lineColor="#E85C6C" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"></u-tabs>
		</viwe>
		<view class="" v-if="status11 == 3" style="display: flex;flex-direction: row;align-items: center;">
			<view class="scrss">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="230">
					<view class=""
						style="display: flex;flex-direction: row;align-items: center;flex-warp:warp;margin-left: 50rpx;">
						<view v-for="(item,index) in datesss" @click="aaaaa(index)"
							:class="[{'active':actine == index},'btn']" style="margin-right: 50rpx;">
							<text>{{item.day.split('/')[1]+'/'+item.day.split('/')[2]}}</text>
							<text style="width: 150rpx;">{{item.name}}</text>
						</view>
						<view :class="[{'active':actine == 7},'btn']" @click="aaaaa(7)" style="margin-right: 100rpx;">
							<text style="width: 150rpx;">今天</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="" @click="show = true"
				style="width: 15%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
				<image src="../../static/img/111.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
			</view>


			<view class="">
				<u-calendar @close="show = false" color="#f56c6c" :show="show" @confirm="confirm1"></u-calendar>
			</view>
		</view>
		<view class="" v-if="status11 == 2" style="display: flex;flex-direction: row;align-items: center;">
			<view class="scrss">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<view class=""
						style="display: flex;flex-direction: row;align-items: center;flex-warp:warp;margin-left: 50rpx;">
						<view :class="[{'active':actine1 == 7},'btn']" @click="aaaaa1(7)" style="margin-right: 50rpx;">
							<text style="width: 150rpx;">今天</text>
						</view>
						<view v-for="(item,index) in datesss1" @click="aaaaa1(index)"
							:class="[{'active':actine1 == index},'btn']" style="margin-right: 50rpx;">
							<text>{{item.day.split('/')[1]+'/'+item.day.split('/')[2]}}</text>
							<text style="width: 150rpx;">{{item.name}}</text>
						</view>

					</view>
				</scroll-view>
			</view>
			<view class="" @click="show = true"
				style="width: 15%;display: flex;flex-direction: row;align-items: center;justify-content: center;">
				<image src="../../static/img/111.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
			</view>


			<view class="">
				<u-calendar @close="show = false" color="#f56c6c" :show="show" @confirm="confirm"></u-calendar>
			</view>
		</view>
		<view class="line">
		</view>
		<view class="main">
			<view class="list">
				<view class="item" v-for="(item,index) in datalist" :key="index">

					<view class="line1" style="position: relative;">
						<view class="" style="display: flex;flex-direction: row;align-items: center;width: 100%;">
							<view class="" style="color: rgb(120, 121, 118);">
								{{item.competitionName}}
							</view>
							<view class="" style="font-weight: 400;color: #a9a9a9;margin-left: 50rpx;">
								{{item.startTime}}
							</view>
						</view>
						<view class="" style="color: #e64d5c;position: absolute;left: 350rpx;">
							<view class="" v-if="item.elapsed != 0">
								<text>{{item.elapsed}}</text>
							</view>
							<view class="" style="color: #a9a9a9;" v-else>
								未
							</view>
						</view>
						<view class="" style="width: 50rpx;">
						</view>
					</view>
					<view class="line2">
						<view class="aaa">
							<!-- 			<view class="tag">
								1
							</view> -->
							<view class="sss">
								{{item.homeTeamName}}
							</view>
						</view>
						<view class="ddd"
							style="display: flex;flex-direction: row;align-items: center; color: #e95e6b;
    font-weight: 600;width: 50rpx;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;">
							<view class="" v-if="item.score != ''">
								{{item.score}}
							</view>
							<view class="" v-else style="    color: #a9a9a9;font-size: 20rpx;">
								vs
							</view>
						</view>
						<view class="aaa">
							<view class="sss">
								{{item.awayTeamName}}
							</view>
							<!-- 	<view class="tag">
								1
							</view> -->
						</view>
						<image style="position: absolute;right:50rpx;height: 40rpx;width: 40rpx;"
							src="../../static/img/weiyan_2.png" mode=""></image>
					</view>
					<view class="line3" v-if="item.halfTimeScore != ''">
						<view class="">
							半:{{item.halfTimeScore}}
						</view>
					</view>
					<view class="line">
					</view>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		race
	} from '@/api/index.js'
	export default {
		data() {
			return {
				show: false,
				actine: 7,
				actine1: 7,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [{
					name: '足球'
				}],
				list1: [{
					name: '全部',
					status: ''
				}, {
					name: '进行中',
					status: 1
				}, {
					name: '赛程',
					status: 2
				}, {
					name: '赛果',
					status: 3
				}],
				datalist: [],
				page: 1,
				status11: '',
				scheduleDate: '',
				isLoading: false,
				status: 'loadmore',
				iconType: 'flower',
				datesss: [],
				datesss1: [],
				total: 0,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			};
		},
		onLoad() {

		},
		onPullDownRefresh() {
			let that = this
			uni.startPullDownRefresh({
				success() {
					that.datalist = []
					that.page = 1
					that.scheduleDate = ''
					that.loadData()
				},
				fail() {

				}
			})
		},
		onReachBottom() {
			let that = this;
			if (this.datalist.length == this.total) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				that.loadData(); //请求的接口数据
				if (this.datalist.length == this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		onShow() {
			this.loadData();
			let that = this
			setInterval(() => {
				that.datalist = []
				this.page = 1
				that.loadData()
			}, 10000)
			this.getdata()
		},
		methods: {
			confirm(e) {
				let time = e[0]
				this.datalist = []
				this.page = 1
				this.scheduleDate = time
				this.loadData()
				this.show = false
			},
			confirm1() {
				let time = e[0]
				this.datalist = []
				this.page = 1
				this.scheduleDate = time
				this.loadData()
				this.show = false
			},
			getdata() {
				// 获取当前日期
				var currentDate = new Date();

				// 获取前七天的日期
				var previousDates = [];
				for (var i = 6; i >= 0; i--) {
					var previousDate = new Date(currentDate);
					previousDate.setDate(currentDate.getDate() - i);
					previousDates.push(previousDate);
				}

				// 格式化日期
				var formattedDates = previousDates.map(function(date) {
					var year = date.getFullYear();
					var month = (date.getMonth() + 1).toString().padStart(2, '0');
					var day = date.getDate().toString().padStart(2, '0');
					return year + '/' + month + '/' + day;
				});
				formattedDates.pop()
				let weekDay = ["星期日", "星期六", "星期五", "星期四", "星期三", "星期二", "星期一"]
				let dat = []
				formattedDates.forEach((item, index) => {
					dat.push({
						name: weekDay[index],
						day: item
					})
				})
				this.datesss = dat

				let weekDay1 = ["星期四", "星期五", "星期六", "星期日", "星期一", "星期二", "星期三"]
				const dateArray = [];
				let dat1 = []
				for (let i = 0; i < 7; i++) {
					const date = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
					const year = date.getFullYear();
					const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
					const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
					dateArray.push(`${year}/${month}/${day}`);
				}
				dateArray.shift()
				dateArray.forEach((item, index) => {
					dat1.push({
						name: weekDay1[index],
						day: item
					})
				})
				this.datesss1 = dat1
			},
			loadData() {
				race({
					status: this.status11,
					pageNums: 15,
					pages: this.page,
					scheduleDate: this.scheduleDate
				}).then(res => {
					this.datalist = this.datalist.concat(res.data.rows);
					this.total = res.data.count;
					uni.stopPullDownRefresh()
				});
			},
			aaaaa(index) {
				this.actine = index
				if (index == 7) {
					var currentDate = new Date();
					var year = currentDate.getFullYear();
					var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
					var day = currentDate.getDate().toString().padStart(2, '0');

					this.datalist = []
					this.page = 1
					this.scheduleDate = year + '/' + month + '/' + day
					this.loadData()
				} else {
					this.datalist = []
					this.page = 1
					this.scheduleDate = this.datesss[index].day
					this.loadData()
				}
			},
			aaaaa1(index) {
				this.actine1 = index
				if (index == 7) {
					var currentDate = new Date();
					var year = currentDate.getFullYear();
					var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
					var day = currentDate.getDate().toString().padStart(2, '0');

					this.datalist = []
					this.page = 1
					this.scheduleDate = year + '/' + month + '/' + day
					this.loadData()
				} else {
					this.datalist = []
					this.page = 1
					this.scheduleDate = this.datesss1[index].day
					this.loadData()
				}
			},
			click(item) {
				if (item.index != 3) {
					this.datalist = []
					this.page = 1
					this.scheduleDate = ''
					this.status11 = item.index
					this.loadData()

				} else {
					this.actine = 7
					var currentDate = new Date();
					var year = currentDate.getFullYear();
					var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
					var day = currentDate.getDate().toString().padStart(2, '0');

					this.datalist = []
					this.page = 1
					this.scheduleDate = year + '/' + month + '/' + day
					this.status11 = item.index
					this.loadData()

				}
			}
		}
	};
</script>

<style lang="scss">
	.content {}

	.rissght {
		position: absolute;
		left: 75rpx;
		height: 40rpx;
		top: 0rpx;
		width: 40rpx;
	}



	.item {
		width: 100%;
		font-size: 28rpx;
		box-sizing: border-box;

		>view {
			width: 100%;
			padding: 15rpx;
			padding-top: 0;
			padding-bottom: 0;
			box-sizing: border-box;

		}





	}

	.line {
		background-color: #F6F5FA;
		width: 100%;
		margin-top: 10rpx;
		height: 15rpx !important;
		padding: 0;
	}

	.line1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		>view {
			width: 35%;
		}
	}

	.line2 {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;


		.ddd {
			margin-left: 30rpx;
			margin-right: 30rpx;
			font-size: 15rpx;
			font-weight: normal;
			text-align: center;
		}

		.aaa {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		.sss {
			font-size: 3.2vw;
			color: #3c3c3c;
			font-weight: 600;
			text-align: right;
			padding: 1.333vw 0.8vw;
			line-height: 3.2vw;
			width: 200rpx;
			text-align: center;
		}
	}

	.line3 {
		font-weight: 400;
		color: #a9a9a9;
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 15rpx;
		margin-top: 10rpx;
		justify-content: center;
		margin-left: -1rpx;
		margin-bottom: 10rpx;
	}

	.tag {
		color: #fff;
		font-size: 3.2vw;
		height: 3.733vw;
		line-height: 3.733vw;
		border-radius: 1px;
		padding: 0 0.533vw;
		margin: 0.533vw;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		align-items: center;
		background-color: #fcc00b;
		display: inline;
	}

	.scrss {
		width: 85%;
		height: 80rpx;
	}

	.btn {
		margin-right: 20rpx;
		color: #666;
		text-align: center;
		height: 70rpx;
		width: 100rpx;
		float: right;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 0 2.667vw 0 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 27rpx !important;
		box-sizing: border-box;
	}

	.btnss {
		width: 100rpx;
		display: block;
	}

	.active {
		background-color: rgba(255, 0, 0, .1);
		border: 1px solid rgba(233, 94, 107, .4);
		border-radius: 1.6vw;
		color: #e74c5b;
	}
</style>